<template>
<h3>计算属性</h3>
<h4>{{ object.name }}</h4>
<!-- 复杂的逻辑运算不推荐放到标签里 -->
<p>{{ object.content.length > 0 ? "Yes" : "No"}}</p>

<!-- 在computed里实现上面的判断逻辑，注意不要加() -->
<p>{{ isNotNull1 }}</p>

<!-- 在methods里也可以实现，但是要加括号 -->
<p>{{ isNotNull2() }}</p>

<!-- 重要 -->
<!-- 计算属性值会基于其响应式被缓存，也就是说，内容不变，多次调用，一次运算 -->
<!-- 但是方法调用总会重新计算，所以计算属性开销小 -->

</template>

<script>

export default{
    data(){
        return{
            object:{
                name:"awdinvseof",
                content:["123", "456", "789"]
            }
        }     
    },
    computed:{
        isNotNull1(){
            return this.object.content.length > 0 ? "Yes" : "No"
        }
    },
    methods:{
        isNotNull2(){
            return this.object.content.length > 0 ? "Yes" : "No"
        }
    }
}

</script>